<template>
  <div class="nickedit">
    <van-nav-bar title="修改昵称" left-arrow @click-left="$router.back()">
      <template #right>
        <van-button plain type="primary" @click="edit_nickname"
          >保存</van-button
        >
      </template>
    </van-nav-bar>
    <van-field
      v-model="nickname"
      placeholder="请输入昵称"
      clearable
      style="margin-top: 16px"
    />
  </div>
</template>

<script>
import { Field } from "vant";
export default {
  data() {
    return {
      nickname: "",
    };
  },
  created() {
    this.nickname = this.$route.query.nickname;
  },
  components: {
    [Field.name]: Field,
  },
  methods: {
    edit_nickname() {
      let { nickname } = this;
      if (nickname.trim().length === 0) {
        this.$toast("不能为空");
        return;
      }

      sessionStorage.setItem("nickname", nickname);
      setTimeout((v) => {
        this.$router.back();
      }, 100);
    },
  },
};
</script>

<style lang="less">
.nickedit {
  background-color: @color3;
  height: 100vh;
  .van-button {
    height: 9.73333vw;
    border-radius: 5.53333vw;
    margin-right: -14px;
    width: 71px;
  }
}
</style>